<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
			/* 图片脱离文档流--文字包含在图片周边 */	
			float: left;
			margin-right: 50px;  /* 图片与文字链接处间隙*/
			margin-bottom: 50px; /* 图片与文字链接处间隙*/
			}
			p{
				font-size: 16px;/* 页面默认字体尺寸 */
				line-height: 20px;/* 浮动文字，行高无法设定 */
				word-spacing: 20px;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/3.gif" alt="无语哥" width="250px" height="250px">
	<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus, similique ipsum sequi perspiciatis aliquid ratione repellat dolores recusandae beatae. Debitis labore veritatis non laudantium? Magnam repudiandae veritatis reprehenderit praesentium excepturi! Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia incidunt iusto quae enim, sit inventore odio sint molestias, ullam nisi possimus id omnis numquam neque? Dolore eos molestiae harum quia! Lorem ipsum dolor sit, amet consectetur adipisicing elit. At enim laudantium mollitia, aut consectetur placeat assumenda eos numquam, corrupti autem veniam dignissimos, consequuntur pariatur magnam ipsam sed? Iure, tempora! Velit.</p>
	</body>
</html>